<template>
  <div>

    <div class="name">{{ title }}</div>
    <div v-if="type==='sum'">
        <div class="topOne">
            <img src="./image/TOP1.svg" class="medal">
            <span class="name">任务名1</span>
            <span class="num">￥0</span>
        </div>
        <div class="topOne">
            <img src="./image/TOP2.svg" class="medal">
            <span class="name">任务名2</span>
            <span class="num">￥0</span>
        </div>
        <div class="topOne">
            <img src="./image/TOP3.svg" class="medal">
            <span class="name">任务名3</span>
            <span class="num">￥0</span>
        </div>
    </div>

    <div v-if="type==='user'">
        <div class="topOne">
            <img src="./image/TOP1.svg" class="medal">
            <span class="name">用户名1</span>
            <span class="num">￥0</span>
        </div>
        <div class="topOne">
            <img src="./image/TOP2.svg" class="medal">
            <span class="name">用户名2</span>
            <span class="num">￥0</span>
        </div>
        <div class="topOne">
            <img src="./image/TOP3.svg" class="medal">
            <span class="name">用户名3</span>
            <span class="num">￥0</span>
        </div>
    </div>

  </div>
</template>

<script>
  export default {
    props: {
      title: String,
      type: String
    // name:String,
    // num:{
    //     type:Number
    // }
    }
  }
</script>

<style lang="scss" rel="stylesheet/scss">
.name{
    // width: 64px;
    // height: 20px;
    font-size: 16px;
    font-family: PingFang SC, PingFang SC-Semibold;
    font-weight: 600;
    text-align: LEFT;
    color: #333333;
    line-height: 40px;
    margin-left: 15px;
}
.topOne{
    width: 330px;
    height: 50px;
    background: -webkit-linear-gradient(left,#f5f6f8,#fff 100%);
    background: linear-gradient(90deg,#f5f6f8,#fff 100%);
    border-radius: 8px;
    margin: 10px auto;
    position: relative;
    .medal{
        position: absolute;
        width: 27px;
        margin-top: 10px;
        margin-left: 11px;
    }
    .name{
        position: absolute;
        margin-left: 50px;
        margin-top: 14px;
        font-size: 16px;
        font-family: PingFang SC,PingFang SC-Light;
        font-weight: 300;
        text-align: center;
        color: #333;
        line-height: 18px;
    }
    .num{
        position: absolute;
        margin-top: 16px;
        margin-left: 270px;
        font-size: 20px;
        font-family: Oxanium,Oxanium-Bold;
        font-weight: 700;
        text-align: RIGHT;
        color: #333;
        line-height: 20px;
    }
}
</style>
